<template>


  <a-list :data-source="listData" :pagination="pagination" item-layout="vertical" size="small">
    <template #footer>
      <div style="width: 80%; padding-left: 10px;">
        <b>希望您在职场中找到属于自己的位置，实现人生价值！</b>
        祝您工作顺利，生活美满，前程似锦！
      </div>
    </template>
    <template #renderItem="{ item }">

      <a-list-item key="item.title" class="list-item">
        <a-list-item-meta>
          <template #title>
            <div style="display: flex">
              <div  style="margin-right: 20px">
                <router-link :to="{path:`/student/offer/detail/${item.offerId}/${item.offerJobId}/${item.offerStudentId}`}">查看Offer详情</router-link>
              </div>
              <div style="color: green">
                OFFER-截止时间 : {{ formatInterviewDate(item.offerExpirationDate) }}
              </div>
              <div style="color: red;margin-left: 30px" >
                OFFER-状态 : {{ item.offerStatus }}
              </div>
              <div style="width: 50%">
              </div>
              <div>
                <a-popconfirm title="你确定删除这条记录吗，删除后不可恢复？"
                              ok-text="确认"
                              cancel-text="取消"
                              @confirm="deleteOffer(item.offerId,item.offerStudentId)">
                  <template #icon>
                    <question-circle-outlined style="color: red"/>
                  </template>
                  <a-button danger ghost type="primary">删除</a-button>
                </a-popconfirm>
              </div>
              <br>
            </div>
            <div>
              补充信息 : &nbsp;{{ item.offerSupplementaryInformation }}
            </div>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import {pageJobAPI} from "@/apis/job.js";
import http from "@/utils/http.js";
import {pageCollectAPI} from "@/apis/collect.js";
import {useUserStore} from "@/stores/user.js";
import {queryResumeByStudentUserIdAPI} from "@/apis/student.js";
import {pageInterviewAPI} from "@/apis/interview.js";
import {deleteOfferByStudentAPI, pageOfferAPI} from "@/apis/offer.js";
import {QuestionCircleOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";


//获取数据
//获取数据
const useStore = useUserStore();
const studentUserId = ref(useStore.userInfo.userId);
const listData = ref([]);
const data = ref({pageCurrent: 1, pageSize: 5, offerStudentId: '', offerStatus: ''});
const getData = async (data) => {
  const res1 = await queryResumeByStudentUserIdAPI(studentUserId.value)
  data.offerStudentId = res1.data.data.studentId;
  const res = await pageOfferAPI(data)
  pagination.total = res.data.data.total
  listData.value = res.data.data.data
}

const pagination = {
  onChange: page => {
    console.log(page);
    data.value.pageCurrent = page
    getData(data.value)
  },
  pageSize: 5,
  total: 0,
};
// 生命周期
onMounted(() => {
  getData(data.value);
});

//删除
const deleteOffer = async (offerId,studentId) => {
  const res = await deleteOfferByStudentAPI(offerId,studentId)
  if (res.data.flag){
    message.success('删除成功');
    await getData(data.value);
  }
}


const formatInterviewDate = (dateString) => {
  const date = new Date(dateString);

  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

</script>
<style scoped>
.list-item {
  margin: 10px 10px 0;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px; /* 你可以调整这个值来改变圆角的大小 */

  h4 {
    background-color: #F5F5F5;
    padding: 9px;
    border-radius: 5px;
  }
}
</style>